<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue.js</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<div id="app">
		千米： <input type="text" v-model="kilometers" />
		米： <input type="text" v-model="meters" />
	</div>
	<p id="info"></p>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				kilometers: 0,
				meters: 0
			},
			methods: {
			},
			computed: {
			},
			watch: {
				kilometers: function(val) {
					this.kilometers = val;
					this.meters = val * 10;
				},
				meters: function(val) {
					this.kilometers = val / 1000;
					this.meters = val;
				}
			}
		});
		// $watch是一个实例方法
		vm.$watch('kilometers', function (newValue, oldValue)) {
			// 这个回调将在vm.kilimeters改变后调用
			document.getElementById('info').innerHTML = "修改前值为：" + oldValue + ", 修改后值为：" + newValue
		}
	</script>
</body>
</html>
